    <template>
      <!-- 编辑界面 -->
      <el-dialog :title="title" :visible.sync="isVisible" width="60%" @click="closeDialog(false)" @close="closeDialog(false)">

            <el-form label-width="120px"  :model="editForm" :rules="rules" ref="editForm">

              <el-form-item label="是否发布" prop="isPublished">
                <el-checkbox v-model="editForm.published"></el-checkbox>
              </el-form-item>

              <el-form-item label="所属分类" prop="productCategoryId">

                <el-select v-model="editForm.productCategoryId">
                  <el-option
                    v-for="(item,index) in categoryList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>

              </el-form-item>
              <el-form-item label="产品名称" prop="name">
                <el-input size="small" v-model="editForm.name" auto-complete="off" placeholder="请输入产品名称"></el-input>
              </el-form-item>
              <el-form-item label="单价" prop="price">
                <el-input size="small" v-model="editForm.price" auto-complete="off" placeholder="请输入产品单价"></el-input>
              </el-form-item>
              <el-form-item label="原价" prop="oldPrice">
                <el-input size="small" v-model="editForm.oldPrice" auto-complete="off" placeholder="请输入产品原价"></el-input>
              </el-form-item>
              <el-form-item label="图片介绍" prop="imgUrl">
                <el-input size="middle" v-model="editForm.imgUrl" auto-complete="off" placeholder="请输入图片"></el-input>
              </el-form-item>
              <el-form-item label="产品简介" prop="summary">
                <el-input size="middle" v-model="editForm.summary" auto-complete="off" placeholder="请输入简介"></el-input>
              </el-form-item>


              <el-form-item label="图文详情">
                <quill-editor
                  class="editor"
                  v-model="editForm.description"
                  ref="myQuillEditor"
                >
                </quill-editor>
              </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer" style="text-align: right">
              <el-button size="small" @click="closeDialog(false)">取消</el-button>
              <el-button size="small" type="primary"  class="title" @click="submitForm('editForm')">保存</el-button>
            </div>


      </el-dialog>

    </template>

<script>
    import axios from "axios"
    import { quillEditor } from "vue-quill-editor";
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";
    import {productApi} from "../../api/baseApi"

    export default {
        name: 'ProductEdit',
        componentName: 'ProductEdit',
        components:{quillEditor},
        props: {
            dialogVisible:false,
            rowData:{},
            categoryList:Array
        },
        data() {
            return {
                title: '添加',
                content:"",
                //tab-1
                isVisible: this.dialogVisible,
                editForm: {},
                rules: {
                    name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
                    productCategoryId: [{ required: true, message: '请选择产品类别', trigger: 'blur' }],
                    imgUrl: [{ required: true, message: '请选择图片', trigger: 'blur' }],
                    price: [{ required: true, message: '请输入单价', trigger: 'blur' }],
                    oldPrice: [{ required: true, message: '请输入原价', trigger: 'blur' }]
                }
            };
        },
        methods:{

            // 关闭编辑、增加弹出框
            closeDialog(saveOrNot) {
                this.isVisible = false;
                this.$emit('onDialogClose',saveOrNot);
            },

            //提交基本信息
            submitForm(editData) {
                this.$refs[editData].validate(valid => {
                    if (valid) {
                        axios.post(productApi+"product/save",this.editForm)
                            .then(res=>{
                               this.closeDialog(true);
                            }).catch(err=>{
                            this.$message.error('公司保存失败，请稍后再试！'+err)
                        })

                    } else {
                        return false
                    }
                })
            }
        },
        watch: {

            //监听窗口变化，通知母版
            dialogVisible: {
                handler: function (val) {
                    if (val) {
                        this.isVisible = true;
                        this.editForm = this.rowData;
                        if(this.rowData.id!=undefined && this.rowData.id>0){
                            this.title="编辑";
                        }
                        else{
                            this.title = "添加";
                        }
                    }
                }
            }

        },
        mounted() {
        }
    };
</script>

    <style scoped>
      .avatar{
        max-width: 150px;
        max-height: 150px;
      }
    </style>

